<template>
  <div id="app">
    <div class="header">
      <h1>AI问答系统</h1>
      <p>基于GPT-4o-mini的智能对话助手</p>
    </div>
    
    <div class="chat-container">
      <div class="messages">
        <div 
          v-for="(message, index) in messages" 
          :key="index" 
          :class="['message', message.role]">
          <div class="message-content">
            {{ message.content }}
          </div>
          <div class="message-meta">
            {{ message.timestamp }} | {{ message.role === 'user' ? '您' : 'AI助手' }}
          </div>
        </div>
        
        <div v-if="loading" class="loading">
          <div class="typing-indicator">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
      </div>
      
      <div class="input-area">
        <textarea
          v-model="inputMessage"
          placeholder="请输入您的问题..."
          @keydown.enter="sendMessage"
          :disabled="loading"
        ></textarea>
        <button 
          @click="sendMessage" 
          :disabled="!inputMessage.trim() || loading">
          发送
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import axios from 'axios'

export default {
  name: 'App',
  setup() {
    const messages = ref([])
    const inputMessage = ref('')
    const loading = ref(false)

    const sendMessage = async () => {
      if (!inputMessage.value.trim() || loading.value) return
      
      const userMessage = {
        role: 'user',
        content: inputMessage.value.trim(),
        timestamp: new Date().toLocaleTimeString()
      }
      
      messages.value.push(userMessage)
      const currentInput = inputMessage.value
      inputMessage.value = ''
      loading.value = true
      
      try {
        const response = await axios.post('/api/chat', {
          message: currentInput
        })
        
        const aiMessage = {
          role: 'assistant',
          content: response.data.answer,
          timestamp: new Date().toLocaleTimeString(),
          model: response.data.model
        }
        
        messages.value.push(aiMessage)
      } catch (error) {
        console.error('发送消息失败:', error)
        const errorMessage = {
          role: 'system',
          content: '抱歉，发送消息时出现错误，请稍后重试。',
          timestamp: new Date().toLocaleTimeString()
        }
        messages.value.push(errorMessage)
      } finally {
        loading.value = false
      }
    }

    return {
      messages,
      inputMessage,
      loading,
      sendMessage
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

#app {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  text-align: center;
  color: white;
  margin-bottom: 30px;
}

.header h1 {
  font-size: 2.5em;
  margin-bottom: 10px;
}

.chat-container {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.messages {
  height: 500px;
  overflow-y: auto;
  padding: 20px;
  background: #f8f9fa;
}

.message {
  margin-bottom: 15px;
  max-width: 80%;
}

.message.user {
  margin-left: auto;
}

.message.assistant {
  margin-right: auto;
}

.message.system {
  margin: 0 auto;
  max-width: 90%;
  text-align: center;
}

.message-content {
  padding: 12px 16px;
  border-radius: 18px;
  word-wrap: break-word;
}

.message.user .message-content {
  background: #007bff;
  color: white;
}

.message.assistant .message-content {
  background: #e9ecef;
  color: #333;
}

.message.system .message-content {
  background: #ffc107;
  color: #333;
  font-style: italic;
}

.message-meta {
  font-size: 0.8em;
  color: #6c757d;
  margin-top: 5px;
  text-align: right;
}

.message.user .message-meta {
  text-align: right;
}

.message.assistant .message-meta {
  text-align: left;
}

.loading {
  text-align: center;
  padding: 20px;
}

.typing-indicator {
  display: inline-flex;
  gap: 4px;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #007bff;
  animation: typing 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%, 60%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  30% {
    transform: scale(1);
    opacity: 1;
  }
}

.input-area {
  padding: 20px;
  background: white;
  border-top: 1px solid #e9ecef;
  display: flex;
  gap: 10px;
}

textarea {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  resize: none;
  font-size: 14px;
  min-height: 60px;
  transition: border-color 0.2s;
}

textarea:focus {
  outline: none;
  border-color: #007bff;
}

textarea:disabled {
  background-color: #f8f9fa;
  cursor: not-allowed;
}

button {
  padding: 12px 24px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s;
}

button:hover:not(:disabled) {
  background: #0056b3;
}

button:disabled {
  background: #6c757d;
  cursor: not-allowed;
}
</style>